Node.js এবং Express ফ্রেমওয়ার্ক ব্যবহার করে Static Files Serve করা এবং Form Data Handle করা দুটি গুরুত্বপূর্ণ কাজ। এখানে আমরা দেখব কিভাবে স্ট্যাটিক ফাইলগুলো সার্ভ করা হয় এবং কিভাবে HTML ফর্মের ডাটা সার্ভার সাইডে প্রক্রিয়া করা হয়।
১. Static Files Serve করা
Static files হল এমন ফাইল যেগুলি পরিবর্তিত হয় না এবং এগুলি সরাসরি ক্লায়েন্ট ব্রাউজারে পাঠানো হয়। সাধারণত HTML, CSS, JavaScript, ইমেজ ফাইল (PNG, JPG) ইত্যাদি স্ট্যাটিক ফাইল হিসেবে ব্যবহৃত হয়।
Express ব্যবহার করে Static Files Serve করা
Express ফ্রেমওয়ার্ক ব্যবহার করে স্ট্যাটিক ফাইল সার্ভ করা সহজ। আপনি express.static() মেথড ব্যবহার করে স্ট্যাটিক ফাইলের জন্য একটি নির্দিষ্ট ডিরেক্টরি নির্ধারণ করতে পারেন।
Example: Static Files Serve করা
- প্রথমে Express ইনস্টল করুন
npm install express- স্ট্যাটিক ফাইল ফোল্ডার তৈরি করুন
/project
/public
/css
style.css
/images
logo.png
/js
app.js
app.js- Express অ্যাপ তৈরি করুন
const express = require('express');
const path = require('path');
const app = express();
// Static files সার্ভ করতে public ফোল্ডারটি ব্যবহার করা হচ্ছে
app.use(express.static(path.join(__dirname, 'public')));
// একটি রুট তৈরি করা
app.get('/', (req, res) => {
res.send('<h1>Welcome to Static File Server!</h1>');
});
// সার্ভার চালু করা
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});এখানে, express.static(path.join(__dirname, 'public')) দিয়ে public ফোল্ডারের মধ্যে থাকা সমস্ত ফাইলকে স্ট্যাটিক ফাইল হিসেবে সার্ভ করা হয়েছে।
ব্রাউজারে স্ট্যাটিক ফাইল অ্যাক্সেস করা
আপনি ব্রাউজারে http://localhost:3000 গিয়ে ওয়েব পেজ দেখতে পারবেন। স্ট্যাটিক ফাইলগুলি যেমন:
http://localhost:3000/css/style.csshttp://localhost:3000/js/app.jshttp://localhost:3000/images/logo.png
এই ফাইলগুলিকে সরাসরি অ্যাক্সেস করা যাবে।
২. Form Data Handle করা
Node.js এবং Express ব্যবহার করে ফর্ম ডাটা সার্ভার সাইডে প্রক্রিয়া করা যেতে পারে। ফর্ম ডাটা প্রক্রিয়া করতে, body-parser মডিউল ব্যবহার করা হয়, তবে Express 4.16.0 এর পর থেকে express.json() এবং express.urlencoded() বিল্ট-ইন মেথড হিসেবে অন্তর্ভুক্ত করা হয়েছে।
Example: Form Data Handle করা
- Express ইনস্টল করুন
npm install express- HTML ফর্ম তৈরি করুন
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Example</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">Submit</button>
</form>
</body>
</html>এখানে, একটি সাধারন HTML ফর্ম তৈরি করা হয়েছে যা ব্যবহারকারীর নাম এবং ইমেল গ্রহণ করবে।
- Express অ্যাপ তৈরি করুন এবং Form Data Handle করুন
const express = require('express');
const app = express();
// URL-encoded data (form data) এর জন্য middleware ব্যবহার
app.use(express.urlencoded({ extended: true }));
// JSON data এর জন্য middleware ব্যবহার
app.use(express.json());
// ফর্ম রেন্ডার করার রুট
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html'); // index.html ফাইলটি দেখানো হচ্ছে
});
// ফর্ম সাবমিট করার রুট
app.post('/submit', (req, res) => {
const { name, email } = req.body; // ফর্ম ডাটাটি req.body থেকে আনা হচ্ছে
console.log(`Received: Name - ${name}, Email - ${email}`);
res.send(`<h1>Thank you, ${name}! We have received your email: ${email}</h1>`);
});
// সার্ভার চালু করা
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});Code Explanation:
- express.urlencoded({ extended: true }): এই মিডলওয়্যারটি POST ফর্ম ডাটা হ্যান্ডল করতে ব্যবহৃত হয়।
extended: trueমানে ফর্ম ডাটা একটি object হিসেবে প্রসেস করা হবে। - express.json(): JSON ডাটা হ্যান্ডল করার জন্য ব্যবহৃত হয়।
- req.body: ফর্ম ডাটা এখানে
req.bodyথেকে আসে, যেখানে ফর্মের ইনপুট ভ্যালুগুলি থাকে।
Step-by-Step:
- যখন ব্যবহারকারী ফর্মটি সাবমিট করবে, তখন
/submitরুটে ডাটা পাঠানো হবে। - এই ডাটাটি
req.bodyএর মাধ্যমে এক্সেস করা হবে এবং কনসোলে প্রিন্ট হবে। - শেষে, একটি কাস্টম মেসেজ দেখানো হবে যেখানে ব্যবহারকারীর নাম এবং ইমেল প্রদর্শিত হবে।
ব্রাউজারে Form Data Submit করা:
- যখন আপনি ফর্মটি পূর্ণ করবেন এবং সাবমিট করবেন, তখন আপনার ডাটা
/submitরুটে পাঠানো হবে এবং সার্ভারে এটি প্রসেস হবে। - সার্ভার থেকে একটি কাস্টম কনফার্মেশন মেসেজ পাঠানো হবে, যেমন:
Thank you, [Name]! We have received your email: [Email].
সারাংশ
- Static Files Serve করা: Express ব্যবহার করে খুব সহজে স্ট্যাটিক ফাইল সার্ভ করা যায়।
express.static()মেথড দিয়ে একটি ফোল্ডার থেকে ফাইল সরাসরি ক্লায়েন্টে পাঠানো যায়। - Form Data Handle করা: Express এবং
express.urlencoded()ওexpress.json()মেথড ব্যবহার করে HTML ফর্মের ডাটা প্রক্রিয়া করা হয় এবং সার্ভারে এই ডাটা প্রক্রিয়া করা যায়। - আপনি স্ট্যাটিক ফাইল এবং ফর্ম ডাটা একসাথে ব্যবহার করে একটি পূর্ণাঙ্গ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন যেখানে ফর্ম সাবমিশন এবং ডাটা রিট্রিভাল করা হয়।
Read more
